<template>
  <!-- 图表页面 -->
  <div>
    图表页面
    <div id="main" style="width: 600px; height: 600px"></div>
    <div id="pie" style="width: 600px; height: 600px"></div>
  </div>
</template>

<script>
/**
 * echarts:
 * 1. 定义盒子，要有宽高
 * 2. 下载并且 引入echarts
 * 3. 在mounted生命周期中调用
 *
 */
import * as echarts from 'echarts'

// 班级 人数，对应的数据
/**
 *
 * 横轴：班级 + 课程名字
 * 纵轴：班级人数
 */

export default {
  data() {
    return {
      obj: {
        '1910A': {
          course: '项目实战',
          num: 52,
        },
        '1912A': {
          course: '组件化开发',
          num: 42,
        },
      },
      xArr: [],
      list: [],
    }
  },
  created() {
    console.log(Object.keys(this.obj), '--------')
    console.log(Object.values(this.obj), '--------')
    Object.keys(this.obj).forEach((item, index) => {
      Object.values(this.obj).forEach((v, i) => {
        // console.log(v.course, 'v')
        console.log(index, 'i----->', i)
        if (index === i) {
          this.xArr.push(`${item}-${v.course}`)
          this.list.push({ name: `${item}-${v.course}`, value: v.num })
          // this.series.push({
          //   name: `${item}-${v.course}`,
          //   // data: []
          // })
        }
      })
    })

    console.log(this.xArr, 'xarr')
  },
  mounted() {
    this.drawEcharts('main', 'bar')
    this.drawEcharts('pie', 'pie')
  },
  methods: {
    drawEcharts(textNode, type = 'bar') {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById(textNode))
      // 绘制图表
      myChart.setOption({
        title: {
          text: 'ECharts 入门示例',
        },
        tooltip: {},
        // x轴
        xAxis: {
          data: this.xArr,
        },
        // y轴
        yAxis: {},
        // 数据
        series: [
          {
            name: '班级人数统计',
            type: type,
            data: this.list,
          },
        ],
      })
    },
  },
}
</script>

<style></style>
